<template>
  <FullPageModal :body-style="{ padding: 0 }" hide-footer>
    <div class="h-full flex flex-col">
      <div class="p-4">
        <a-button type="primary" @click="showCreateModal">新建联系人</a-button>
      </div>
      <div class="flex-1 overflow-hidden">
        <SlTable
          :columns="columns"
          row-key="id"
          :data-source="tableData"
          :pagination="pagination"
          :loading="tableLoading"
        >
          <template #bodyCell="{ column, record }">
            <div v-if="column.key === 'oper'">
              <a @click="showUpdateModal(record)">编辑</a>
              <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
            </div>
          </template>
        </SlTable>
      </div>
    </div>
    <CURDDialog
      ref="CURDModalIns"
      id-key="id"
      create-title="新增联系人"
      update-title="编辑联系人"
      delete-message="确认删除该联系人吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
      :columns="columns"
      @before-ok="beforeOk"
    />
  </FullPageModal>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import { Api } from "/@/api/main/pis";
import { useCURD } from "/@/hooks/useCURD";
import { AddressBookItem } from "/@/api/main/pis/models";
import { TableProps } from "ant-design-vue";
import {
  CURDAction,
  CURDDialogExpose,
  CURDModalEvent,
  FormItemData,
  ShowCURDModalOptions,
} from "/@/components/CURDDialog/models";

const props = defineProps<{
  supplierId?: number;
}>();

watch(
  () => props.supplierId,
  (val) => {
    if (val) {
      reloadTable({ model: { supplierId: val } });
    }
  }
);

const columns = ref<TableProps<AddressBookItem>["columns"]>([
  {
    title: "联系人姓名",
    dataIndex: "name",
  },
  {
    title: "部门",
    dataIndex: "dept",
  },
  {
    title: "职务",
    dataIndex: "post",
  },
  {
    title: "电话",
    dataIndex: "phone",
  },
  {
    title: "邮件",
    dataIndex: "email",
  },
  {
    title: "IM通讯",
    dataIndex: "im",
  },
  {
    title: "操作",
    key: "oper",
  },
]);

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<AddressBookItem>({
  getPageUrl: Api.addressBookPage,
  cudUrl: Api.addressBooks,
  loadOnMounted: false,
});

const CURDModalIns = ref<CURDDialogExpose>();
const showOptions = ref<ShowCURDModalOptions>();
const model = ref<Partial<AddressBookItem>>({
  name: "",
  dept: "",
  post: "",
  phone: "",
  email: "",
  im: "",
});

const modelFormSetting = ref<FormItemData[]>([
  {
    key: "name",
    required: true,
  },
  {
    key: "dept",
  },
  {
    key: "post",
  },
  {
    key: "phone",
  },
  {
    key: "email",
  },
  {
    key: "im",
  },
]);

function beforeOk({ model }: CURDModalEvent) {
  if (model) {
    model.supplierId = props.supplierId as number;
  }
}
function showCreateModal() {
  showOptions.value = { action: CURDAction.CREATE };
}

function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}
function handleDelete(record) {
  showOptions.value = { action: CURDAction.DELETE, ids: [record.id] };
}
</script>
